<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - 电动车销售管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <style>
        .password-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .password-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .password-form .form-group {
            margin-bottom: 20px;
        }

        .password-strength {
            height: 5px;
            margin-top: 5px;
            border-radius: 3px;
            background-color: #eee;
            overflow: hidden;
        }

        .strength-bar {
            height: 100%;
            width: 0;
            transition: width 0.3s ease;
        }

        .password-rules {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<header class="dashboard-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
                <p class="mb-0 opacity-75">业务员工作台</p>
            </div>
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="d-none d-md-inline">${currentUser.name}</span>
                    <div class="badge bg-light text-dark">
                        <i class="bi bi-person-circle me-1"></i> 业务员
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-gear fs-5"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/logout"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="password-container">
        <div class="password-header">
            <h2><i class="bi bi-shield-lock me-2"></i>修改密码</h2>
            <p class="text-muted">请定期更新密码以确保账户安全</p>
        </div>

        <c:if test="${not empty error}">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-circle me-2"></i> ${error}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </c:if>

        <c:if test="${not empty success}">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-2"></i> ${success}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <c:remove var="success" scope="session"/>
        </c:if>

        <form class="password-form" action="${pageContext.request.contextPath}/changePassword" method="post">
            <div class="form-group">
                <label for="currentPassword" class="form-label">当前密码</label>
                <input type="password" class="form-control" id="currentPassword" name="currentPassword" required>
            </div>

            <div class="form-group">
                <label for="newPassword" class="form-label">新密码</label>
                <input type="password" class="form-control" id="newPassword" name="newPassword" required
                       pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
                       title="至少8个字符，包含大小写字母和数字">
                <div class="password-strength">
                    <div class="strength-bar" id="strengthBar"></div>
                </div>
                <div class="password-rules">
                    <p><i class="bi bi-info-circle me-1"></i>密码强度要求：</p>
                    <ul>
                        <li id="lengthRule">至少8个字符</li>
                        <li id="uppercaseRule">包含大写字母</li>
                        <li id="lowercaseRule">包含小写字母</li>
                        <li id="numberRule">包含数字</li>
                    </ul>
                </div>
            </div>

            <div class="form-group">
                <label for="confirmPassword" class="form-label">确认新密码</label>
                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                <div class="invalid-feedback" id="confirmFeedback">两次输入的密码不一致</div>
            </div>

            <div class="d-grid gap-2 mt-4">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="bi bi-key me-1"></i> 更新密码
                </button>
                <a href="${pageContext.request.contextPath}/salesman/list.jsp" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i> 返回主面板
                </a>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const newPassword = document.getElementById('newPassword');
        const confirmPassword = document.getElementById('confirmPassword');
        const confirmFeedback = document.getElementById('confirmFeedback');
        const strengthBar = document.getElementById('strengthBar');

        // 密码强度检查
        newPassword.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;

            document.getElementById('lengthRule').style.color = '#6c757d';
            document.getElementById('uppercaseRule').style.color = '#6c757d';
            document.getElementById('lowercaseRule').style.color = '#6c757d';
            document.getElementById('numberRule').style.color = '#6c757d';

            // 检查长度
            if (password.length >= 8) {
                strength += 25;
                document.getElementById('lengthRule').style.color = '#28a745';
            }

            // 检查大写字母
            if (/[A-Z]/.test(password)) {
                strength += 25;
                document.getElementById('uppercaseRule').style.color = '#28a745';
            }

            // 检查小写字母
            if (/[a-z]/.test(password)) {
                strength += 25;
                document.getElementById('lowercaseRule').style.color = '#28a745';
            }

            // 检查数字
            if (/\d/.test(password)) {
                strength += 25;
                document.getElementById('numberRule').style.color = '#28a745';
            }

            // 更新强度条
            strengthBar.style.width = strength + '%';

            // 设置颜色
            if (strength < 50) {
                strengthBar.style.backgroundColor = '#dc3545';
            } else if (strength < 75) {
                strengthBar.style.backgroundColor = '#ffc107';
            } else {
                strengthBar.style.backgroundColor = '#28a745';
            }
        });

        // 密码一致性检查
        confirmPassword.addEventListener('input', function() {
            if (this.value !== newPassword.value) {
                this.classList.add('is-invalid');
                confirmFeedback.style.display = 'block';
            } else {
                this.classList.remove('is-invalid');
                confirmFeedback.style.display = 'none';
            }
        });

        document.querySelector('form').addEventListener('submit', function(e) {
            if (newPassword.value !== confirmPassword.value) {
                e.preventDefault();
                confirmPassword.classList.add('is-invalid');
                confirmFeedback.style.display = 'block';
            }
        });
    });
</script>
</body>
</html>